<!DOCTYPE html>
<html style="height:100%">
<head>
    <title>模块管理</title>
    <% include ../layouts/import.ejs %>
</head>
<body style="height:100%">
    <div class="index height">
        <% include ../layouts/header.ejs %>
        <form id="searchForm" role="form" action="/module/search" method="post">
            <div class="container">
                <div class="row">
                    <div style="margin-top:20px" class="panel panel-default">
                        <div class="panel-body">
                            <div style="margin:0;" class="row form-group form-group-sm">
                                <div class="col-sm-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">模块名称</span>
                                        <div class="input-group col-sm-12"><input name="moduleName" placeholder="请输入模块名称" class="form-control"></div>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <button type="submit" id="qryBtn" class="person-sreach btn btn-primary btn-sm">查询</button>
                                </div>
                                <div class="pull-right">
                                    <span class="glyphicon glyphicon-plus person-add" id="addModuleBtn"></span>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>

                </div>
                <div id="mygraph"></div>
            </div>
        </form>
 <!--新建窗口-->
        <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" class="modal fade">
            <div role="document" class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                            <span aria-hidden="true"></span>
                        </button>
                        <h4 class="modal-title">新建模块</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <form id="createForm" role="form" method="post" action="/module/add" class="form-horizontal">
                                <div style="text-align: center" class="row form-group form-group-sm">
                                    <div class="form-group form-group-sm">
                                        <label class="col-sm-4 control-label">模块名称<span style="color:red;font-weight:bolder">*</span>
                                        </label>
                                        <div class="col-sm-6">
                                            <input type="text" name="moduleName" class="form-control input-md">
                                        </div>
                                    </div>
                                    <div class="form-group form-group-sm">
                                        <label class="col-sm-4 control-label">模块描述<span style="color:red;font-weight:bolder">*</span>
                                        </label>
                                        <div class="col-sm-6">
                                            <input type="text" name="moduleDescription" class="form-control input-md">
                                        </div>
                                    </div>
                                    <div class="form-group form-group-sm">
                                        <label class="col-sm-4 control-label">创建人<span style="color:red;font-weight:bolder">*</span>
                                        </label>
                                        <div class="col-sm-6">
                                            <input type="text" name="moduleCreatPerson" class="form-control input-md">
                                        </div>
                                    </div>
                                    <div class="form-group form-group-sm">
                                        <label class="col-sm-4 control-label">创建时间<span style="color:red;font-weight:bolder">*</span>
                                        </label>
                                        <div class="col-sm-6">
                                            <input type="text" name="moduleCreatTime" class="form-control input-md">
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="person-preservation btn btn-primary">保存</button>
                                    <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!--修改信息窗口-->
        <div id="moduleUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" class="modal fade">
            <div role="document" aria-hidden="true" class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                            <span aria-hidden="true"></span>
                        </button>
                        <h4 class="modal-title">编辑模块信息</h4>
                    </div>
                    <div class="modal-body"></div>
                </div>
            </div>
        </div>


        <% include ../layouts/footer.ejs %>
        <script>
            $(function () {
                $('#module-management').addClass('select-active')

                loadNetwork();

                //添加模块弹窗
                $('#addModuleBtn').click(function () {
                    layer.open({
                        type: 2,
                        title: '新增模块',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['893px', '600px'],
                        content: '/module/add',
                        btn: ['保存', '关闭'],
                        btn1: function (index, layero) {
                            var body = layer.getChildFrame('body', index);
                            var action = body.find('form').attr('action');
                            var formDataArr = body.find('form').serializeArray();
                            var dependencies = body.find('[name="dependencies"]');
                            var formData = {};
                            $.each(formDataArr, function (index, element) {
                                formData[element.name] = element.value;
                            })
                            $.post(action, formData, function (result) {
                                if (result.errcode === 0) {
                                    layer.close(index);
                                    loadNetwork();
                                }
                            });
                        },
                        btn2: function (index, layero) {
                            layer.close(index);
                        }
                    });
                });


            })


            function loadNetwork() {
                $.getJSON('/module/moduleData', function (result) {
                    console.log(result)

                    var nodes = new vis.DataSet(result.moduleArray);

                    // create an array with edges
                    var edges = new vis.DataSet(result.moduleContact);

                    // create a network
                    var container = document.getElementById('mygraph');
                    var data = {
                        nodes: nodes,
                        edges: edges
                    };
                    var options = {
                        nodes: {
                            shape: 'circle',
                            size: 16,
                            font: {
                                size: 12,
                                color:'#000000'
                            },
                            borderWidth: 1,
                            shadow:true
                        },
                        edges: {
                            width: 2,
                            shadow:true
                        }
                    };
                    var network = new vis.Network(container, data, options);
                })
            }
        </script>

    </div>
</body>
</html>